<template>
    <div info-container>
        <!-- 筛选日志 -->
        <div class="select-container">
            <el-form>
                <el-form-item label="发布时间" :model="selectForm" :inline="true">
                    <el-col :span="5">
                        <el-date-picker 
                            type="date" placeholder="开始日期" 
                            v-model="selectForm.startTime" style="width: 100%;"
                            value-format="yyyy-MM-dd"
                            >
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1"><div>至</div></el-col>
                    <el-col :span="5">
                        <el-date-picker 
                            type="date" placeholder="结束日期" 
                            v-model="selectForm.endTime" style="width: 100%;" 
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="2"><el-button type="primary" @click="search()">查询</el-button></el-col> 
                </el-form-item>
                
            </el-form>
        </div>
        <el-divider></el-divider>
        <!-- 发布列表 -->
        <div class="table-container">
            <!-- <el-table :data="blogdata.bloglist" stripe style="width: 100%" border>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="title" label="帖子标题"></el-table-column>
                <el-table-column prop="theme" label="主题"></el-table-column>
                <el-table-column prop="createTime" label="帖子发布时间"></el-table-column>
                <el-table-column prop="newestCommentTime" label="最新评论时间"></el-table-column>
                <el-table-column prop="commentCounts" label="评论数"></el-table-column>
                <el-table-column prop="likeCounts" label="点赞量"></el-table-column>
                <el-table-column prop="collectCounts" label="收藏量"></el-table-column>
                <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button size="mini" @click="checkBlog(scope.row.id)">查看发帖</el-button> -->
                    <!-- 删除发帖按钮 -->
                    <!-- <el-button type="danger" size="mini" @click="judgeDelete(scope.row.id)">删除发帖</el-button>
                </template>
            </el-table-column>
            </el-table> -->
            <el-card v-for="item in blogdata.bloglist" :key="item.id"  style="margin-bottom: 10px">
                <div slot="header">
                    <span class="textheader" @click="jumpTo(item.id)"><b>{{item.title}}</b></span>
                    <el-button style="float: right; padding: 5px 3" type="danger" plain @click="judgeDelete(item.id)">删除发帖</el-button>
                </div>
                <div class="text-container">
                    <span class="context"> 
                        {{item.content}}
                    </span>
                    <br>
                    <span class="timetext">
                        发布时间：{{item.createTime}}
                    </span>
                    <br>
                    <span class="timetext">
                        最新评论时间：{{item.newestCommentTime}}
                    </span>
                </div>
            </el-card>
        </div>
        <!-- 分页 -->
       <el-pagination
        layout="total, prev, pager, next"
        :total="this.blogdata.total"
        @current-change="handleCurrentChange" 
        :current-page="currentPage"
        :page-size="pagesize"
      >
      </el-pagination> 
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    import { mapState } from 'vuex';
    export default{
        data() {
            return {
                selectForm: {
                    startTime: '',
                    endTime: '',
                },
                blogdata: {
                    bloglist:[],
                    total: 0
                },
                currentPage: 1, //当前页 刷新后默认显示第一页
                pagesize: 5,
            }
        },
        created() {
            this.search()
        },
        methods: {
            search(){ // 获取帖子收藏列表
                // console.log(this.selectForm)
                if(this.selectForm.endTime == null) {
                    this.selectForm.endTime = ''
                }
                if(this.selectForm.startTime == null) {
                    this.selectForm.startTime = ''
                }
                
                requests.get('/blogs/myBlogs',
                {
                    params: {
                        page: 1,
                        pageSize: 5,
                        startTime: this.selectForm.startTime,
                        endTime: this.selectForm.endTime
                    }
                }
                ).then(
                    (res) => {
                        // console.log(res)
                        this.blogdata.bloglist = res.data.records
                        this.blogdata.total = res.data.total
                        if(res.data.records.newestCommentTime == null) {
                            this.blogdata.bloglist.newestCommentTime = '暂无评论'
                        }
                    }
                )
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage
                // console.log(this.currentPage)
                requests.get('/blogs/myBlogs',
                {
                    params: {
                        page: this.currentPage,
                        pageSize: 5,
                        startTime: this.selectForm.startTime,
                        endTime: this.selectForm.endTime
                    }
                }
                ).then(
                    (res) => {
                        console.log(res)
                        this.blogdata.bloglist = res.data.records
                        this.blogdata.total = res.data.total
                    }
                )
            },
            judgeDelete(id) { // 删除发帖
                
                this.$messagebox.confirm('此操作将删除该帖子且无法撤回, 是否继续?', '提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        // console.log(id)
                        requests.delete('/blogs/deleteMyBlogById/' + id).then(
                            (res) => {
                                // console.log(res);
                                this.$message.success('删除发帖成功!')
                                this.$router.go(0); // 刷新页面
                            }
                        )
                    }
                ).catch(
                    () => {
                        this.$message.info('已撤回删除发帖')
                    })
                
            },
            // judgeDelete(id) {
            //     console.log(id);
            // },
            jumpTo(id){
                console.log(id);
                this.$router.push('/blogs/?id=' + id)
            }
            // checkBlog(id) {
            //     console.log(this.token)
            //     this.$router.push({path:'/blogs/?='+id, headers:this.token})
            // }
        },
        computed: {
    ...mapState({
      token: (state) => {
        return state.login.token;
      },
    }),
  },
    }
</script>

<style lang="less" scoped>
.info_container{
      height: 600px;
      width: 700px;
      margin-left: 150px;
      margin-top: 50px;
      font-size: larger;
}
.select-container{
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 20px;
}
.item {
    margin: 50px;
}
.textheader {
    font-size: 20px;
}
.timetext {
    float: right;
    font-size: 10px;
    color: rgb(93, 87, 87);
}
</style>